<template>
  <view class="select-campus-main">
    <view class="select-title" :class="selectTitleClass">
      <view
        class="select-title-item"
        v-for="(item, index) in showCampusInfo"
        @tap="handleToggle(index)"
        :key="index"
        >{{ item.title }}</view
      >
      <view v-if="isShowSelectBtn" class="select-title-item active"
        >请选择</view
      >
    </view>
    <cityIndexes
      v-if="isShowCityIndex"
      :isShowSelectIcon="true"
      :isStartCountScrollTop.sync="isStartCountScrollTop"
      :cityInfo="currentSource"
      :list="currentList"
      @changeCity="handleChange"
      @changeOwn="handleClickOwn"
    >
    </cityIndexes>

    <view v-if="isShowDefaultImg" class="default-page">
      <image :src="NOT_DATA" />
      <view>暂无数据</view>
    </view>
  </view>
</template>
<script>
import cityIndexes from "@/components/city-indexes/index";
import { getLetterSortCitys, getRegionCampus } from "@/libs/api/base-api";
import { NOT_DATA } from "../image-url";
const MAX_STACK_LEN = 3;
/**返回数据的类型 */
const BACK_SOURCE_TYPE = {
  0: "FIRST", // 选择城市
  1: "SECOND", // 选择区县
  2: "THIRD", // 选择校区
  3: "modify" // 修改
};
export default {
  props: {
    isShowCampus: {
      type: Boolean,
      default: false
    },
    /**已选校区，成都-区级-校区 */
    selectCampus: {
      type: Array,
      default: () => []
    },
    fullList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    /**城市列表 */
    cityList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  components: {
    cityIndexes
  },
  data() {
    return {
      NOT_DATA,
      campusInfo: [],
      midCampuInfo: [],
      listStack: [],
      listIndex: 0,
      isStartCountScrollTop: false
    };
  },
  computed: {
    isModifyCampu() {
      return this.selectCampus.length === MAX_STACK_LEN;
    },
    /**校区是否为全填写 */
    isFullCampus() {
      return this.showCampusInfo.length === MAX_STACK_LEN;
    },
    currentSource() {
      return this.showCampusInfo[this.listIndex];
    },
    /**是否显示已选择 */
    isShowSelectBtn() {
      return this.showCampusInfo.length < MAX_STACK_LEN;
    },
    selectTitleClass() {
      return {
        "select-title-active": this.isFullCampus
      };
    },
    /**当前展示的索引列表 */
    currentList() {
      return this.listStack[this.listIndex];
    },
    showCampusInfo() {
      return this.isModifyCampu ? this.midCampuInfo : this.campusInfo;
    },
    isShowCityIndex() {
      return this.isShowCampus && this.currentList?.length;
    },
    isShowDefaultImg() {
      return !this.currentList?.length && !this.isLoading;
    }
  },
  watch: {
    cityList: {
      handler: function(newValue) {
        if (newValue.length) {
          this.listStack = [newValue];
        }
      },
      immediate: true
    },
    isShowCampus: {
      handler: function(newVal) {
        if (!newVal) return;
        if (this.isModifyCampu) {
          this.midCampuInfo = [...this.selectCampus];
          this.handleInitListInfo();
          return;
        }
        this.listStack = [this.cityList];
        this.campusInfo = [];
        this.midCampuInfo = [];
        this.listIndex = 0;
      },
      immediate: true
    }
  },
  methods: {
    handleToggle(index) {
      this.listIndex = index;
      this.listStack = this.listStack.slice(0, index + 1);
      this.isModifyCampu
        ? (this.midCampuInfo = this.midCampuInfo.slice(0, index))
        : (this.campusInfo = this.campusInfo.slice(0, index));
      this.isStartCountScrollTop = true;
    },
    handleModifyInfo(data) {
      const isModify = this.isModifyCampu;
      isModify ? this.midCampuInfo.push(data) : this.campusInfo.push(data);
      /**只存在城市时才请求区级接口 */

      switch (data.type) {
        case "FIRST":
          this.listIndex++;
          const info = isModify ? this.midCampuInfo : this.campusInfo;
          const [city] = info;
          this.handleGetRegionCampus(city.id);
          break;
        case "SECOND":
          this.listIndex++;
          this.listStack.push(data.campus);
          break;
        case "THIRD": // 选完校区后该关闭弹窗
          this.$emit("cancel", this.showCampusInfo);
        default:
          break;
      }
    },
    handleChange(data) {
      if (this.isFullCampus) {
        this.midCampuInfo.splice(MAX_STACK_LEN - 1, 1, data);
        this.$emit("cancel", this.midCampuInfo);
        return;
      }
      data.type = BACK_SOURCE_TYPE[this.showCampusInfo.length];
      this.handleModifyInfo(data);
    },
    handleClickOwn() {
      this.$emit("cancel", this.midCampuInfo);
    },
    /**获取区级校区 */
    async handleGetRegionCampus(city_id, initInfo) {
      this.$startLoading();
      this.isLoading = true;
      const [err, { data }] = await this.$captureCatch(
        getRegionCampus({ city_id })
      );
      this.isLoading = false;
      this.$endLoading();
      if (err?.message) return this.$message(err.message);

      if (!initInfo) {
        this.listStack.push(data);
        return;
      }
      this.listStack.splice(1, 1, data);
      const flatCampu = data.reduce((prev, item) => {
        return prev.concat(item.items);
      }, []);
      const { campus } = flatCampu.find(i => i.id === initInfo?.region?.id);
      // console.log(campus, initInfo);
      campus?.length && this.listStack.splice(2, 1, campus);
      this.listIndex = this.listStack.length - 1;
    },
    handleInitListInfo() {
      const [city, region, campus] = this.selectCampus;
      if (city?.id) {
        this.handleGetRegionCampus(city.id, { region, campus });
      }
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/tools.scss";
.select-campus-main {
  .select-title {
    padding: 16px 0;
    box-sizing: content-box;
    @include normal-flex(flex-start);
    @include base-text(44px, 32px, #606266, 400);
    &-item {
      margin-right: 64px;
      &:last-child {
        margin-right: 0;
        flex: 1;
        @include textEllipsis;
        text-align: left;
      }
    }
    .active {
      color: #ff8000;
      text-align: left;
    }
  }
  .select-title-active {
    view:last-child {
      color: #ff8000;
    }
  }
  .city-indexes-content {
    max-height: 670px;
  }
  .default-page {
    padding: 160px 0;
    view {
      margin-top: 24px;
      text-align: center;
      @include base-text(40px, 24px, #606266, 400);
    }
    image {
      width: 374px;
      height: 200px;
    }
  }
}
</style>
